<script setup>
    import { ref, reactive, toRef, toRefs } from 'vue';
    /**
     * 响应式数据处理方式：
     *  1、ref函数，ref函数多使用与单个值的响应式，使用ref函数生成的值，在script标签中使用需要.value，而在template标签中使用不需要.value
     *  2、reactive函数，reactive函数多用于对象的响应式，不管在哪里使用只要对象名.属性名即可
     */

    // ref函数
    let counter = ref(10)
    function incr(){
        return counter.value++
    }
    function reduce(){
        return counter.value--
    }


    // reactive函数
    let person = reactive({
        name: "张三",
        age: 29
    })
    function incrAge(){
        person.age++
    }
    function reduceAge(){
        person.age--
    }

    // toref和torefs函数
    let age1 = toRef(person, 'age')
    let {name, age:age2} = toRefs(person)
    function toRefAge() {
        age1.value++;
    }
    let toRefName = function(){
        age2.value++;
    }
</script>

<template>
    <div>
        <button v-on:click="incr()">+</button>
        {{ counter }}
        <button v-on:click="reduce()">-</button>

        <hr>

        <button v-on:click="incrAge()">+</button>
        {{ person.age }}
        <button v-on:click="reduceAge()">-</button><br/>
        姓名：{{ person.name }}<br/>
        年龄：{{ person.age }}

        <hr>
        <!-- toRef和toRefs -->
        toRef和toRefs：<button v-on:click="toRefAge()">+</button>
        toRef和toRefs：<button v-on:click="toRefName()">+</button>
    </div>
</template>
    
<style scoped>

</style>
